<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>评议打分</title>
        <div id="app">
            <h2>{{ message }}</h2>
        </div>
    <div id="TableView">
            <!-- 头部工具-->
        <el-row >
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="评审单位">
                    <el-input v-model="searchForm.name" placeholder="单位"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="searchClick">查询</el-button>
                    <!--<el-button type="success" icon="el-icon-plus" @click="addClick">新增</el-button>-->
                </el-form-item>
            </el-form>
        </el-row>
        <!-- 头部工具  End-->
        <!-- -->
        <el-row type="flex" class="row-bg" justify="center" >
            <el-table
                    :data="tableData"
                    v-loading.body="loading"
                    border
                    style="width:100%">
                <el-table-column
                        type="index"
                        label="编号"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="manage"
                        label="主管单位"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="评议单位"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="industry"
                        label="所属行业"
                        width="120">
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template scope="scope">
                        <el-button type="success" plain v-if="scope.row.appstate=='1'"  icon="el-icon-edit" @click="editClick( scope.row)">打分</el-button>
                        <el-button type="success" plain v-if="scope.row.appstate=='2'"  icon="el-icon-edit"  :disabled="a" @click="LookClick( scope.row)">完成打分</el-button>
                     </template>
                </el-table-column>
            </el-table>
        </el-row>
        <!-- 列表  End-->
        <!--底部工具栏-->
        <el-row style="margin-top: 20px" type="flex" justify="end">
            <!-- <el-col :span="6" >
                <el-button :plain="true" type="danger" size="small" icon="delete" @click="removeSelection">删除所选</el-button>
            </el-col> -->
            <el-col :span="18" >
                <el-pagination
                        style="float: right"
                        @size-change="pageSizeChange"
                        @current-change="currentPageChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-col>
        </el-row>
        <!--底部工具栏-->
        <el-dialog title="正在评议打分..." :visible.sync="editFormVisible" :close-on-click-modal="false" class="dia">
            <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
                <el-form-item label="评议单位" prop="name" :disabled="a">
                    <el-input v-model="editForm.name" auto-complete="off" readOnly></el-input>
                </el-form-item>
                <el-form-item label="评议信息" >
                    <el-table
                            :data="getData"
                            style="width: 100%">
                        <el-table-column
                                prop="pname"
                                label="评议项目"
                                width="145"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="excellent"
                                label="优"
                                width="100"
                                align="center">
                            <template scope="scope">
                                <el-radio  type="radio" v-model="radio[scope.$index]" :label="scope.row.excellent" :value="scope.row.excellent">&nbsp;&nbsp;&nbsp;&nbsp;</el-radio>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="good"
                                label="良"
                                width="100"
                                align="center">
                            <template scope="scope">
                                <el-radio type="radio"  v-model="radio[scope.$index]" :label="scope.row.good" :value="scope.row.good">&nbsp;</el-radio>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="secondary"
                                label="中"
                                width="100"
                                align="center">
                            <template scope="scope">
                                <el-radio  type="radio" v-model="radio[scope.$index]" :label="scope.row.secondary" :value="scope.row.secondary" >&nbsp;&nbsp;</el-radio>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="poor"
                                label="差"
                                width="100"
                                align="center">
                            <template scope="scope">
                                <el-radio  type="radio" v-model="radio[scope.$index]" :label="scope.row.poor" :value="scope.row.poor" >&nbsp;&nbsp;&nbsp;</el-radio>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false" @click="resetForm('editForm')">取消</el-button>
                <el-button type="primary" @click.native="editSubmit('editForm')" :loading="editLoading" >提交</el-button>
            </div>
        </el-dialog>
    </div>
</head>
<body>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                message:'评议得分'
            }
        })

        var tableView=new Vue({
            el:'#TableView',
            data: {
                a:true,
                // 表格初始化
                tableData: [],
                getData:[],
                radio:[],
                //加载样式
                editLoading:false,
                //隐藏表单
                editFormVisible:false,
                //加载样式
                loading:false,
                //验证规则
                editFormRules: {
                },
                editForm: {
                    name: '',
                    excellent: '',
                    good: '',
                    secondary: '',
                    poor: '',
                },
                //当前页
                currentPage:1,
                //分页大小
                pageSize:5,
                //总记录数
                total:800,
                searchForm:{
                    name:''
                },
                goUrl:'',
            },
            created:function () {
                var self=this;
                var start =(this.currentPage-1)*this.pageSize;
                var end =this.pageSize;
                axios.post("/appraisalscore/tolist",{'start':start,'pageSize':end}).then(function (response) {
                    self.total=response.data.total;
                    self.tableData = response.data.data;
                    self.getData = response.data.getdata;
                })
            },
        methods:{
            loadingData:function(){
                var self=this;
                var start =(this.currentPage-1)*this.pageSize;
                var end =this.pageSize;
                var searchForm={'start':start,'pageSize':end,'name':this.searchForm.name};
                axios.post("/appraisalscore/tolist",searchForm).then(function (response) {
                    self.total=response.data.total;
                    self.tableData = response.data.data;
                    self.getData = response.data.getdata;
                })
            },
            editClick:function(row){
                a:false,
                this.goUrl="/appraisalscore/fs";
                this.editFormVisible = true;
                this.editForm = Object.assign({}, row);
            },
            LookClick:function(row){
                this.editFormVisible = true;
                this.editForm = Object.assign({},row);
            },
            //头部查询
            searchClick:function(){
                var self = this;
                self.loadingData();//重新加载数据
            },
            //分页大小修改事件
            pageSizeChange:function(val) {
                console.log('每页 ' + val +' 条');
                this.pageSize = val;
                var _self = this;
                _self.loadingData();//重新加载数据
            },
            //取消事件
            resetForm:function(editForm) {
                this.$refs[editForm].resetFields();
            },
            //当前页修改事件
            currentPageChange:function(val) {
                this.currentPage = val;
                console.log('当前页: ' + val);
                var _self = this;
                _self.loadingData();//重新加载数据
            },
            //保存点击事件
            editSubmit:function(editForm){
                var _self = this;
                var radios = this.radio;
                //alert(radios)
                if(radios.length < 1) {
                    _self.$message({
                        message: '请至少选中一条记录',
                        type: 'error'
                    });
                    return;
                }
                this.$refs[editForm].validate((valid) =>{
                    if (valid) {
                        this.$message({
                            message: '提交成功',
                            type: 'success'
                        });
                        var _self = this;
                        var formData =this.editForm;
                        var goUrl=this.goUrl;
                        //alert(goUrl);
                        formData.radios=radios;
                        //alert(JSON.stringify(formData));
                        axios.post(goUrl,formData).then(function(response){
                            //console.log(response.data);
                            // alert(222);
                            // self.total=response.data.total;
                            if(response.data>0){
                                _self.editFormVisible = false;// 让弹出层隐藏
                                _self.loadingData();//重新加载数据
                            }
                        });
                        console.info(this.editForm);
                    } else {
                        console.log('不能提交!!');
                        return false;
                    }
                });
            }
        }
            })
    </script>
</body>
</html>